<template>
    <div>
        电影页面
        <br>
        <router-link to="/movie/xiju">喜剧</router-link>
        <router-link to="/movie/kongbu">恐怖</router-link>
        <br>
        <router-view></router-view>
    </div>
</template>

<script setup>
    import { watch } from 'vue'
    import { useRoute } from 'vue-router'
    const route = useRoute() // 获取路由信息
    watch(() => route.path, (to, from) => {
        console.log(to, '===to===')
        console.log(from, '===from===')
    })
</script>

<style scoped>
div {
height: 200px;
text-align: center;
background-color: rgb(169, 16, 90);
}
a {
    margin: 10px;
    width: 30px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #000;
    padding: 5px;
    color: white;
}
</style>